/*!
 * Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
 * Dual-licensed under the BSD or MIT licenses
 */
;(function($, window, document, undefined)
{
	var hasTouch = 'ontouchstart' in window,
		 currentEl, 
		 bgColor =  "#F9F9F9";
		 currentBgColor = "#EEEEEE";
		 newId = 0;

		/**
		* Detect CSS pointer-events property
		* events are normally disabled on the dragging element to avoid conflicts
		* https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js
		*/
		var hasPointerEvents = (function()
		{
		var el    = document.createElement('div'),
			docEl = document.documentElement;
		if (!('pointerEvents' in el.style)) {
			return false;
		}
		el.style.pointerEvents = 'auto';
		el.style.pointerEvents = 'x';
		docEl.appendChild(el);
		var supports = window.getComputedStyle && window.getComputedStyle(el, '').pointerEvents === 'auto';
		docEl.removeChild(el);
		return !!supports;
		})();

		var eStart  = hasTouch ? 'touchstart'  : 'mousedown',
		eMove   = hasTouch ? 'touchmove'   : 'mousemove',
		eEnd    = hasTouch ? 'touchend'    : 'mouseup';
		eCancel = hasTouch ? 'touchcancel' : 'mouseup';

		var defaults = {
			listNodeName    : 'ol',
			itemNodeName    : 'li',
			contentNodeName : 'div',
			imageNodeName	 : 'img',
			inputNodeName	 : 'input',
			formNodeName	 : 'form',
			rootClass       : 'dd',
			listClass       : 'dd-list',
			itemClass       : 'dd-item',
			dragClass       : 'dd-dragel',
			handleClass     : 'dd-handle',
			collapsedClass  : 'dd-collapsed',
			placeClass      : 'dd-placeholder',
			noDragClass     : 'dd-nodrag',
			emptyClass      : 'dd-empty',
			fileSelectClass : 'dd-file',
			imageClass		 : 'dd-image',
			textDisplayClass: 'dd-display',
			textEditClass	 : 'dd-edit',
			str4UploadId	 : 'uploadImgId',
			expandBtnHTML   : '<button data-action="expand" type="button">Expand</button>',
			collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
			newElHTML1		 : '<li class="dd-item" data-id="',
			newElHTML2		 : '">\
										<div class="dd-handle">\
											<form class="dd-form">\
												<img class="dd-image" src="img/NewCategory.png"> \
												<input class="dd-file" id="',
			newElHTML3		 :'" type="file" name="uploadImg">\
												<input class="dd-display" maxlength="50" value="双击输入分类名称"/>\
											</form>\
										</div>\
									</li>',
			group           : 0,
			maxDepth        : 5,
			threshold       : 20
		};

		function Plugin(element, options)
		{
		this.w  = $(window);
		this.el = $(element);
		this.options = $.extend({}, defaults, options);
		this.init();
		}

		Plugin.prototype = {

		init: function()
		{
			var list = this;

			list.reset();

			list.el.data('nestable-group', this.options.group);

			list.placeEl = $('<div class="' + list.options.placeClass + '"/>');

			$.each(this.el.find(list.options.itemNodeName), function(k, el) {
				 list.setParent($(el));
			});

			list.el.on('click', 'button', function(e) {
				 if (list.dragEl || (!hasTouch && e.button !== 0)) {
					  return;
				 }

				 var target = $(e.currentTarget),
					  action = target.data('action'),
					  item   = target.parent(list.options.itemNodeName);
				 if (action === 'collapse') {
					  list.collapseItem(item);
				 }
				 if (action === 'expand') {
					  list.expandItem(item);
				 }
			});

			var onStartEvent = function(e)
			{
				var handle = $(e.target);

				if (!handle.hasClass(list.options.handleClass)) {
					if (handle.closest('.' + list.options.noDragClass).length) {
						return;
					}
					handle = handle.closest('.' + list.options.handleClass);
				}
				if (!handle.length || list.dragEl || (!hasTouch && e.button !== 0) || (hasTouch && e.touches.length !== 1)) {
					return;
				}
				//e.preventDefault();
			
				//Leon edit: set current element
				if ($(e.target).closest(list.options.itemNodeName)[0] != currentEl)
				{
					list.setCurrentEl(e);
				}
				
				//Leon edit: if clicking image or input, don't drag the category
				switch($(e.target).attr("class")){
					case list.options.imageClass:
						//list.uploadPreview(e);
						break;
					case list.options.textDisplayClass:
						//list.inputEdit(e);
						break;
					case list.options.textEditClass:
						//
						break;
					default:
						list.dragStart(hasTouch ? e.touches[0] : e);
				}
			};

			var onMoveEvent = function(e)
			{
				 if (list.dragEl) {
					  e.preventDefault();
					  list.dragMove(hasTouch ? e.touches[0] : e);
				 }
			};

			var onEndEvent = function(e)
			{
				 if (list.dragEl) {
					  e.preventDefault();
					  list.dragStop(hasTouch ? e.touches[0] : e);
				 }
			};

			if (hasTouch) {
				 list.el[0].addEventListener(eStart, onStartEvent, false);
				 window.addEventListener(eMove, onMoveEvent, false);
				 window.addEventListener(eEnd, onEndEvent, false);
				 window.addEventListener(eCancel, onEndEvent, false);
			} else {
				 list.el.on(eStart, onStartEvent);
				 list.w.on(eMove, onMoveEvent);
				 list.w.on(eEnd, onEndEvent);
			}

		},

		serialize: function(arrayChangedName)
		{
			var data,
				 depth = 0,
				 list  = this;
				 
				 step  = function(level, depth)
				 {
					  var array = [ ],
							items = level.children(list.options.itemNodeName);
					  items.each(function()
					  {
							var li   = $(this),
								 item = $.extend({}, li.data()),
								 sub  = li.children(list.options.listNodeName);

							if (arrayChangedName){
								for (var i=0; i< arrayChangedName.length; i++){
									if (arrayChangedName[i][0] == li.attr("data-id")){
										item = $.extend(item, JSON.parse('{"name":"' + arrayChangedName[i][1] + '"}'));
										break;
									}
								}
							}
							if (sub.length) {
								 item.children = step(sub, depth + 1);
							}
							array.push(item);
					  });
					  return array;
				 };
			data = step(list.el.find(list.options.listNodeName).first(), depth);
			return data;
		},

		serialise: function()
		{

			return this.serialize();
		},

		reset: function()
		{

			this.mouse = {
				 offsetX   : 0,
				 offsetY   : 0,
				 startX    : 0,
				 startY    : 0,
				 lastX     : 0,
				 lastY     : 0,
				 nowX      : 0,
				 nowY      : 0,
				 distX     : 0,
				 distY     : 0,
				 dirAx     : 0,
				 dirX      : 0,
				 dirY      : 0,
				 lastDirX  : 0,
				 lastDirY  : 0,
				 distAxX   : 0,
				 distAxY   : 0
			};
			this.moving     = false;
			this.dragEl     = null;
			this.dragRootEl = null;
			this.dragDepth  = 0;
			this.hasNewRoot = false;
			this.pointEl    = null;
		},

		expandItem: function(li)
		{

			li.removeClass(this.options.collapsedClass);
			li.children('[data-action="expand"]').hide();
			li.children('[data-action="collapse"]').show();
			li.children(this.options.listNodeName).show();
		},

		collapseItem: function(li)
		{

			var lists = li.children(this.options.listNodeName);
			if (lists.length) {
				 li.addClass(this.options.collapsedClass);
				 li.children('[data-action="collapse"]').hide();
				 li.children('[data-action="expand"]').show();
				 li.children(this.options.listNodeName).hide();
			}
		},

		expandAll: function()
		{

			var list = this;
			list.el.find(list.options.itemNodeName).each(function() {
				 list.expandItem($(this));
			});
		},

		collapseAll: function()
		{

			var list = this;
			list.el.find(list.options.itemNodeName).each(function() {
				 list.collapseItem($(this));
			});
		},

		//Leon edit: reset the whole list background
		resetBackground: function(li)
		{
			if(li.length){
				li[0].style.backgroundColor = bgColor;
				li.find("." + this.options.textDisplayClass).css({
					"background-color": bgColor,
					"border": bgColor
				});
				li.find("." + this.options.textEditClass).css({
					"background-color": bgColor,
					"border": bgColor
				});
			}
		},
		
		//Leon eidt: set current element
		setCurrentEl: function(e, liEl)
		{
			var handle, contentEl,
				 list = this;

			if (e){
				handle = $(e.target),
				contentEl = handle[0].closest("." + list.options.handleClass);
				
				//reset all the tree (to be 
				if (handle[0].closest("." + list.options.handleClass).tagName == list.options.contentNodeName.toUpperCase()){
					$.each(list.el.find(list.options.contentNodeName), function(k, el) {
						list.resetBackground($(el));
					});
					//set current element color
					contentEl.style.backgroundColor = currentBgColor;
					$($(contentEl).find('.' + list.options.textDisplayClass)).css({
						"background-color": contentEl.style.backgroundColor,
						"border": contentEl.style.backgroundColor
					});
					currentEl = e.target.closest(list.options.itemNodeName);
				}
			}else{
				if (liEl != 0){
					$.each(list.el.find(list.options.contentNodeName), function(k, el) {
						list.resetBackground($(el));
					});
					contentEl = liEl.children("div").first()[0];
					contentEl.style.backgroundColor = currentBgColor;
					$(contentEl).find("." + list.options.textDisplayClass).css({
						"background-color": contentEl.style.backgroundColor,
						"border": contentEl.style.backgroundColor
					});
				}
				currentEl = $(liEl)[0];
			}
		},

		//Leon edit: add a new element
		addNewElement: function(arrayChangedName)
		{
			var newElHTML, list = this,
				 listOrderEl = list.el.children(this.options.listNodeName);
			
			newId += -1;
			newElHTML = this.options.newElHTML1 + newId + this.options.newElHTML2 + list.options.str4UploadId + newId + this.options.newElHTML3;
			if (currentEl){
				$(currentEl).after($(newElHTML));
				list.setCurrentEl(0,$(currentEl).next());
			}else{
				if (listOrderEl.children().length){
					listOrderEl.children().last().after($(newElHTML));
				}
				else{
					listOrderEl.html(newElHTML);
				}
				
				list.setCurrentEl(0,listOrderEl.children().last());
			}
			
			//when category name changed, the new name will be save to array change name
			$(currentEl).find('.' + list.options.textDisplayClass).watch(function(value, e){
				updateArrayCategory(value, e, arrayChangedName);
			});
			
		},

		//Leon edit: remove a element
		removeElement: function()
		{
			var elHolder, idDelete, 
				 list = this;

			//currentId = currentEl.getAttribute("data-id");
			if (currentEl)
			{
				if ($(currentEl).prev().length !=0){
					elHolder = $(currentEl).prev();
				}else{
					if ($(currentEl).parent().closest(list.options.itemNodeName).length !=0){
						elHolder = $(currentEl).parent().closest(list.options.itemNodeName);
					}
					else{
						elHolder = 0;
					}
				}
				idDelete = $(currentEl).attr("data-id");
				$(currentEl).remove();
				list.setCurrentEl(0,elHolder);
				return idDelete;
			}
		},
		


		setParent: function(li)
		{
		if (li.children(this.options.listNodeName).length) {
				 li.prepend($(this.options.expandBtnHTML));
				 li.prepend($(this.options.collapseBtnHTML));
			}
			li.children('[data-action="expand"]').hide();
		},

		unsetParent: function(li)
		{

			li.removeClass(this.options.collapsedClass);
			li.children('[data-action]').remove();
			li.children(this.options.listNodeName).remove();
		},

	  dragStart: function(e)
	  {

			var mouse    = this.mouse,
				 target   = $(e.target),
				 dragItem = target.closest(this.options.itemNodeName);

			this.placeEl.css('height', dragItem.height());
		
        //Leon edit: fix for bug of image input in cell
        switch (target.context.localName){
            case this.options.formNodeName:
                mouse.offsetX = (e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left)+26;
                mouse.offsetY = (e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top)+4;
                break;
            default:
                mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left;
                mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top;
            }

			mouse.startX = mouse.lastX = e.pageX;
			mouse.startY = mouse.lastY = e.pageY;

			this.dragRootEl = this.el;

			this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
			this.dragEl.css('width', dragItem.width());

			// fix for zepto.js
			//dragItem.after(this.placeEl).detach().appendTo(this.dragEl);
			dragItem.after(this.placeEl);
			dragItem[0].parentNode.removeChild(dragItem[0]);
			dragItem.appendTo(this.dragEl);

			$(document.body).append(this.dragEl);
			this.dragEl.css({
				 'left' : e.pageX - mouse.offsetX,
				 'top'  : e.pageY - mouse.offsetY
			});
			// total depth of dragging item
			var i, depth,
				 items = this.dragEl.find(this.options.itemNodeName);
			for (i = 0; i < items.length; i++) {
				 depth = $(items[i]).parents(this.options.listNodeName).length;
				 if (depth > this.dragDepth) {
					  this.dragDepth = depth;
				 }
			}
	  },

	  dragStop: function(e)
	  {

			// fix for zepto.js
			//this.placeEl.replaceWith(this.dragEl.children(this.options.itemNodeName + ':first').detach());
			var el = this.dragEl.children(this.options.itemNodeName).first();
			el[0].parentNode.removeChild(el[0]);
			this.placeEl.replaceWith(el);

			this.dragEl.remove();
			this.el.trigger('change');
			if (this.hasNewRoot) {
				 this.dragRootEl.trigger('change');
			}
			this.reset();
	  },

	  dragMove: function(e)
	  {
		  var list, parent, prev, next, depth,
				 opt   = this.options,
				 mouse = this.mouse;

			this.dragEl.css({
				 'left' : e.pageX - mouse.offsetX,
				 'top'  : e.pageY - mouse.offsetY
			});

			// mouse position last events
			mouse.lastX = mouse.nowX;
			mouse.lastY = mouse.nowY;
			// mouse position this events
			mouse.nowX  = e.pageX;
			mouse.nowY  = e.pageY;
			// distance mouse moved between events
			mouse.distX = mouse.nowX - mouse.lastX;
			mouse.distY = mouse.nowY - mouse.lastY;
			// direction mouse was moving
			mouse.lastDirX = mouse.dirX;
			mouse.lastDirY = mouse.dirY;
			// direction mouse is now moving (on both axis)
			mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX > 0 ? 1 : -1;
			mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY > 0 ? 1 : -1;
			// axis mouse is now moving on
			var newAx   = Math.abs(mouse.distX) > Math.abs(mouse.distY) ? 1 : 0;

			// do nothing on first move
			if (!mouse.moving) {
				 mouse.dirAx  = newAx;
				 mouse.moving = true;
				 return;
			}

			// calc distance moved on this axis (and direction)
			if (mouse.dirAx !== newAx) {
				 mouse.distAxX = 0;
				 mouse.distAxY = 0;
			} else {
				 mouse.distAxX += Math.abs(mouse.distX);
				 if (mouse.dirX !== 0 && mouse.dirX !== mouse.lastDirX) {
					  mouse.distAxX = 0;
				 }
				 mouse.distAxY += Math.abs(mouse.distY);
				 if (mouse.dirY !== 0 && mouse.dirY !== mouse.lastDirY) {
					  mouse.distAxY = 0;
				 }
			}
			mouse.dirAx = newAx;

			/**
			 * move horizontal
			 */
			if (mouse.dirAx && mouse.distAxX >= opt.threshold) {
				 // reset move distance on x-axis for new phase
				 mouse.distAxX = 0;
				 prev = this.placeEl.prev(opt.itemNodeName);
				 // increase horizontal level if previous sibling exists and is not collapsed
				 if (mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {
					  // cannot increase level when item above is collapsed
					  list = prev.find(opt.listNodeName).last();
					  // check if depth limit has reached
					  depth = this.placeEl.parents(opt.listNodeName).length;
					  if (depth + this.dragDepth <= opt.maxDepth) {
							// create new sub-level if one doesn't exist
							if (!list.length) {
								 list = $('<' + opt.listNodeName + '/>').addClass(opt.listClass);
								 list.append(this.placeEl);
								 prev.append(list);
								 this.setParent(prev);
							} else {
								 // else append to next level up
								 list = prev.children(opt.listNodeName).last();
								 list.append(this.placeEl);
							}
					  }
				 }
				 // decrease horizontal level
				 if (mouse.distX < 0) {
					  // we can't decrease a level if an item preceeds the current one
					  next = this.placeEl.next(opt.itemNodeName);
					  if (!next.length) {
							parent = this.placeEl.parent();
							this.placeEl.closest(opt.itemNodeName).after(this.placeEl);
							if (!parent.children().length) {
								 this.unsetParent(parent.parent());
							}
					  }
				 }
			}

			var isEmpty = false;

			// find list item under cursor
			if (!hasPointerEvents) {
				 this.dragEl[0].style.visibility = 'hidden';
			}
			this.pointEl = $(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop)));
			if (!hasPointerEvents) {
				 this.dragEl[0].style.visibility = 'visible';
			}
			if (this.pointEl.hasClass(opt.handleClass)) {
				 this.pointEl = this.pointEl.parent(opt.itemNodeName);
			}
			if (this.pointEl.hasClass(opt.emptyClass)) {
				 isEmpty = true;
			}
			else if (!this.pointEl.length || !this.pointEl.hasClass(opt.itemClass)) {
				 return;
			}

			// find parent list of item under cursor
			var pointElRoot = this.pointEl.closest('.' + opt.rootClass),
				 isNewRoot   = this.dragRootEl.data('nestable-id') !== pointElRoot.data('nestable-id');

			/**
			 * move vertical
			 */
			if (!mouse.dirAx || isNewRoot || isEmpty) {
				 // check if groups match if dragging over new root
				 if (isNewRoot && opt.group !== pointElRoot.data('nestable-group')) {
					  return;
				 }
				 // check depth limit
				 depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;
				 if (depth > opt.maxDepth) {
					  return;
				 }
				 var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);
					  parent = this.placeEl.parent();
				 // if empty create new list to replace empty placeholder
				 if (isEmpty) {
					  list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
					  list.append(this.placeEl);
					  this.pointEl.replaceWith(list);
				 }
				 else if (before) {
					  this.pointEl.before(this.placeEl);
				 }
				 else {
					  this.pointEl.after(this.placeEl);
				 }
				 if (!parent.children().length) {
					  this.unsetParent(parent.parent());
				 }
				 if (!this.dragRootEl.find(opt.itemNodeName).length) {
					  this.dragRootEl.append('<div class="' + opt.emptyClass + '"/>');
				 }
				 // parent root list has changed
				 if (isNewRoot) {
					  this.dragRootEl = pointElRoot;
					  this.hasNewRoot = this.el[0] !== this.dragRootEl[0];
				 }
			}
	  }

	};

	$.fn.nestable = function(params, subParam)
	{

	var lists  = this,
			retval = this;	

	  lists.each(function()
	  {
			var plugin = $(this).data("nestable");

		if (!plugin) {
				 $(this).data("nestable", new Plugin(this, params));
				 $(this).data("nestable-id", new Date().getTime());
			} else {
				 if (typeof params === 'string' && typeof plugin[params] === 'function') {
					  retval = plugin[params](subParam);
				 }
			}
	  });

	  return retval || lists;
	};

})(window.jQuery || window.Zepto, window, document);
